<template>
  <div>
    <div class="navbar">
      <input type="checkbox" id="checkbox">
      <label for="checkbox">
        <i class="fa fa-bars" aria-hidden="true"></i>
      </label>
      <ul>
        <li>
          <img :src="list[0].adminImg">
          <span>欢迎您!管理员</span>
        </li>
        <li>
          <a href="javascript:void(0)">
            <i class="fa fa-home" aria-hidden="true"></i>
            <span @click="go1">用户管理</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            <i class="fa fa-sitemap" aria-hidden="true"></i>
            <span @click="go2">商家管理</span>
          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            <i class="fa fa-user-circle-o" aria-hidden="true"></i>
            <span @click="go3">个人中心</span>
          </a>
        </li>
      </ul>
      <div class="main">
        <AdminPage1></AdminPage1>
      </div>
    </div>
  </div>
</template>

<script>
import AdminPage1 from './adminPage1.vue'
import AdminApi from "@/api/apiLiang/Admin_request"
export default {

  data() {
    return {
      list: [],
      searchMap: {
        adminId: 1,
        adminName: null,
        adminNameLike: null,
        adminPassword: null,
        adminImg: null,
        pageNum: 1,
        pageSize: 7,
      },
      count:1,
    }
  },
  created() {
		//在创建vue实例后触发初始化钩子函数
		this.fetchData();
	},
  methods: {
    go1(){
        this.$router.push({path:'UseradminPage',query: {id:'123456'}})
    },
    go2(){
        this.$router.push({path:'MerchatadminPage',query: {id:'123456'}})
    },
    go3(){
        this.$router.push({path:'adminPage',query: {id:'123456'}})
    }
    ,
    fetchData() {
      //编写一个方法请求后端的接口，把返回的数据赋值list
      AdminApi.selectList(this.searchMap).then(response => {
        //  //把返回的结果赋值模型
        this.list = response.data.data
        console.log(this.list);
        this.count = response.data.count
        this.searchMap.adminId = null;
        this.searchMap.adminNameLike = null;
      })
    },
  },
  components: {
    AdminPage1
  }
}
</script>
<style scoped>
* {
  /* 初始化 取消内外边距 */
  margin: 0;
  padding: 0;
}

body {
  /* 溢出隐藏 */
  overflow: hidden;
}

.navbar {
  /* 相对定位 */
  position: relative;
  /* 100%窗口宽度 */
  width: 100vw;
  display: flex;
}

.main {
  flex: 1;
  height: calc(100vh - 43px);
  width: auto;
  position: relative;
  top: 43px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#checkbox {
  /* 隐藏复选框 */
  display: none;
}

.navbar label {
  position: absolute;
  top: 0;
  left: 70px;
  width: 100%;
  height: 43px;
  font-size: 30px;
  color: #5a738e;
  background-color: #ededed;
  padding-left: 20px;
  border: 1px solid #d9dee4;
  cursor: pointer;
  /* 加个动画过渡 */
  transition: all 0.5s;
}

.navbar ul {
  list-style: none;
  width: 70px;
  /* 100%窗口高度 */
  height: 100vh;
  background-color: #2a3f54;
  transition: all 0.5s;
  /* 再加个溢出隐藏 */
  overflow: hidden;
}

.navbar ul li {
  height: 70px;
  margin-bottom: 10px;
}

.navbar ul li:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}

.navbar ul li:first-child img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.navbar ul li:first-child span {
  color: #fff;
  /* 文字禁止换行 */
  white-space: nowrap;
  padding-left: 10px;
  /* 先把文字隐藏 */
  display: none;
}

.navbar ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 垂直排列 */
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: #d1d1d1;
  /* 去掉下划线 */
  text-decoration: none;
}

.navbar ul li a i {
  font-size: 25px;
  margin-bottom: 10px;
}

.navbar ul li a span {
  font-size: 12px;
  white-space: nowrap;
}

.navbar ul li a:hover {
  color: #fff;
  background-color: #35495d;
}

/* :checked选择器是判断复选框是否被选中 */
/* +是相邻兄弟选择器，找到input的下一个兄弟label */
.navbar input:checked+label {
  left: 200px;
}

/* ~也是兄弟选择器，但它可以找到隔了几代的兄弟 */
.navbar input:checked~ul {
  width: 200px;
}

.navbar input:checked~ul li:first-child {
  /* 将居中改为开头对齐 */
  justify-content: flex-start;
}

.navbar input:checked~ul li:first-child span {
  /* 文字显示 */
  display: block;
}

.navbar input:checked~ul li a {
  flex-direction: row;
  justify-content: flex-start;
}

.navbar input:checked~ul li a i {
  font-size: 18px;
  margin: 0 15px 0 30px;
}

.navbar input:checked~ul li a span {
  font-size: 14px;
}</style>